<template>
  <div class="login">
    <!-- 头部
       left-arrow @click-left="$router.back()"-->
    <van-nav-bar title="登录" />

    <van-form @submit="login">
      <!--
      表单结构
      登录表单  点击登录按钮的时候，会触发submit事件
      注意点： required 属性的值是个字符串的false "false" 布尔类型还是true 还有星号效果
              num的值是 字符串 "1+1"   需要写成 :num="1+1"
    -->
      <van-field
        required
        v-model="mobile"
        label="手机号"
        placeholder="请输入你的手机号"
        :rules="rules.mobile"
      />
      <van-field
        required
        v-model="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="rules.code"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="isLoad"
          :loading="isLoad"
          loading-text="提交中..."
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import axios from '@/utils/request'  //api中封装了
import { userLogin } from '@/api/user'

//
import { mapMutations } from 'vuex'

export default {
  name: 'login',
  data() {
    return {
      isLoad: false,
      mobile: '15256907114',
      code: '246810',
      rules: {
        // 手机号校验规则
        mobile: [
          {
            required: true,
            message: '手机号不能为空'
          },
          {
            // 正则校验  可以通过   new RegExp(/a/) 创建正则
            pattern: /^1[3-9]\d{9}$/,
            // /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号格式不正确'
          }
        ],

        // 验证码
        code: [
          { required: true, message: '验证码不能为空' },
          {
            pattern: /^\d{6}$/,
            message: '验证码格式错误'
          }
        ]
      }
    }
  },

  methods: {
    ...mapMutations('user', ['setToken']),
    async login() {
      // 不能给提交按钮注册click来发送请求 ==> 因为表单校验不通过的时候，也会触发
      // 正确做法：
      // console.log('登录中....')

      this.isLoad = true
      try {
        // const res = await axios({
        //   method: 'POST',
        //   url: '/v1_0/authorizations',
        //   // POST方式，数据写在data中
        //   data: {
        //     mobile: this.mobile,
        //     code: this.code
        //   }
        // })
        const res = await userLogin(this.mobile, this.code)
        console.log(res.data)

        // 保存token
        // this.$store.commit('user/setToken', res.data)
        this.setToken(res.data)

        this.$toast.success('登录成功')

        // 跳转到首页
        this.$router.push('/')
      } catch {
        // e 错误消息 e不用， (e)可省略不写
        console.log('登录失败')
        this.$toast.success('登录失败')
      }

      // 不管成功还是失败 代码执行都会到这
      this.isLoad = false

      // try-catch 解决代码报错问题，把有可能出错的代码写到try中，尝试执行（try里面始终会执行）
      // try的代码有错误，会被catch捕获到，不影响后续代码执行

      // // 语法
      // try {
      // } catch (e) {
      //   // e 错误消息 e不用， (e)可省略不写
      // }
    }
  }
}
</script>

<style lang="less" scoped></style>
